<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/能耗对比@2x.png" alt="">
      </div>
      <h2>能耗对比</h2>
    </div>
    <div class="house_cont">
      <div class="house_left">
        <div class="item">
          <h2>{{ this.arr.save_front }}</h2>
          <h3>节能前(MWh/千吨)</h3>
        </div>
        <div class="item">
          <h2>{{ this.arr.save_after }}</h2>
          <h3>节能后(MWh/千吨)</h3>
        </div>
      </div>
      <div class="house_echarts">
        <div class="house_main"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      arr: []
    }
  },
  async created() {
    const id = { tenantid: 1128 }
    const res = await api.ElecContrast(id)
    this.arr = res.data
    // console.log(this.arr)
    this.initChart(res.data)
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    // 图表初始化
    initChart(data) {
      this.myChart = this.$echarts.init(document.querySelector('.house_main'))
      // const colors = ['#41d5ff', '#29dc8d', '#f1c642', '#16b4e5']
      // const circularData = [
      //   [10.0, 8.04],
      //   [8.07, 6.95],
      //   [13.0, 7.58],
      //   [9.05, 8.81],
      //   [11.0, 8.33],
      //   [14.0, 7.66],
      //   [13.4, 6.81],
      //   [10.0, 6.33],
      //   [14.0, 8.96],
      //   [12.5, 6.82],
      //   [9.15, 7.2],
      //   [11.5, 7.2],
      //   [3.03, 4.23],
      //   [12.2, 7.83],
      //   [2.02, 4.47],
      //   [1.05, 3.33],
      //   [4.05, 4.96],
      //   [6.03, 7.24],
      //   [12.0, 6.26],
      //   [12.0, 8.84],
      //   [7.08, 5.82],
      //   [5.02, 5.68]
      // ]
      // const circularData2 = [
      //   [10.0, 7.04],
      //   [8.07, 5.95],
      //   [13.0, 6.58],
      //   [9.05, 7.81],
      //   [11.0, 7.33],
      //   [14.0, 6.66],
      //   [13.4, 5.81],
      //   [10.0, 4.33],
      //   [14.0, 7.96],
      //   [12.5, 5.82],
      //   [9.15, 6.2],
      //   [11.5, 6.2],
      //   [3.03, 3.23],
      //   [12.2, 6.83],
      //   [2.02, 3.47],
      //   [1.05, 2.33],
      //   [4.05, 3.96],
      //   [6.03, 6.24],
      //   [12.0, 5.26],
      //   [12.0, 7.84],
      //   [7.08, 4.82],
      //   [5.02, 4.68]
      // ]
      // 节能前
      const lineData1 = data.elec
      // 节能后
      const lineData2 = data.save_elec
      // 行业均值
      const lineData3 = data.industry_elec
      const xData = data.xdata
      // console.log(data.elec, data.save_elec, data.industry_elec)
      this.myChart.setOption({
        grid: {
          // right: '25%',
          // top: '23%',
          // bottom: '19%',
          // left: '15%',
          // x: "12%",//x 偏移量
          // y: "7%", // y 偏移量
          width: '75%', // 宽度
          height: '60%'
        },
        xAxis: {
          type: 'value',
          position: 'left',
          name: '供水量/㎡',
          nameTextStyle: {
            // padding: [0, 0, 0, 30] // 上右下左与原位置距离
            color: '#3bdfd3'
          },
          splitNumber: 6,
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#5fa1ff'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#3bdfd3'
            }
          },
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'line',
              color: '#427fd5'
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 3
          }
        },
        yAxis: {
          type: 'value',
          position: 'left',
          name: '耗电量/MWh',
          nameTextStyle: {
            // padding: [0, 0, 0, 30] // 上右下左与原位置距离
            color: '#3bdfd3'
          },
          splitNumber: 6,
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'line',
              color: '#427fd5'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#5fa1ff'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#3bdfd3'
            }
          },
          axisTick: {
            show: true,
            inside: true,
            length: 3
          }
        },
        legend: {
          data: ['节能前', '节能后', '行业均值'],
          top: '5%',
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            color: [],
            fontSize: '0.12rem'
          }
          // textStyle: {
          //   color: ['#f8aa03','#066ded','#24dcac'],
          //   fontSize: '12px'
          // }
        },
        series: [
          {
            name: '节能前',
            zlevel: 3,
            type: 'line',
            stack: 'Total',
            symbol: 'none',
            data: lineData1,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f8aa03', //改变折线颜色
                },
              },
            },
          },
          {
            name: '节能后',
            zlevel: 3,
            type: 'line',
            stack: 'Total',
            symbol: 'none',
            data: lineData2,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#066ded', //改变折线颜色
                },
              },
            },
          },
          {
            name: '行业均值',
            zlevel: 3,
            type: 'line',
            stack: 'Total',
            symbol: 'none',
            data: lineData3,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#24dcac', //改变折线颜色
                },
              },
            },
          },
          {
            symbolSize: 6,
            zlevel: 5,
            data: [
              [30000, 20000],
              [80000, 60000],
              [100000, 60000],
              [120000, 90000],
              [120000, 50000],
              [125000, 60000],
              [130000, 100000],
              [135000, 80000],
              [140000, 60000],
              [145000, 90000],
              [150000, 100000],
              [155000, 150000],
              [160000, 110000],
              [200000, 90000],
              [250000, 50000],
              [270000, 60000],
              [280000, 100000],
              [300000, 130000],
              [350000, 140000],
              [400000, 80000],
            ],
            type: 'scatter'
          }
        ]
        // series: [
        //   {
        //     name: 'a',
        //     symbolSize: 6,
        //     zlevel: 4,
        //     color: '#ffae00',
        //     data: circularData,
        //     type: 'scatter'
        //   },
        //   {
        //     name: 'b',
        //     symbolSize: 6,
        //     zlevel: 4,
        //     color: '#24e1ae',
        //     data: circularData2,
        //     type: 'scatter'
        //   },
        //   {
        //     name: '节能前',
        //     zlevel: 3,
        //     data: lineData1,
        //     type: 'line',
        //     itemStyle: {
        //       normal: {
        //         lineStyle: {
        //           color: '#f8aa03', //改变折线颜色
        //         },
        //       },
        //     },
        //   },
        //   {
        //     name: '节能后',
        //     data: lineData2,
        //     zlevel: 3,
        //     type: 'line',
        //     itemStyle: {
        //       normal: {
        //         lineStyle: {
        //           color: '#066ded', //改变折线颜色
        //         },
        //       },
        //     },
        //   },
        //   {
        //     name: '行业均值',
        //     data: lineData3,
        //     zlevel: 3,
        //     type: 'line',
        //     itemStyle: {
        //       normal: {
        //         lineStyle: {
        //           color: '#24dcac', //改变折线颜色
        //         },
        //       },
        //     },
        //   }
        // ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  .modular_top {
    left: -0.8%;
  }

  .house_cont {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .house_left {
      width: 25%;
      padding-left: 0.3rem;
      padding-top: 0.88rem;
      display: flex;
      flex-direction: column;

      .item {
        width: 1.7rem;
        height: 0.88rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: linear-gradient(135deg, rgba(69, 113, 202, 0.8000), #1C3768);
        box-shadow: 0px 6px 9px 1px rgba(7, 27, 57, 0.4000);
        // opacity: 0.4;
        border-radius: 3px;
        margin-bottom: 0.14rem;

        h2 {
          font-size: 0.35rem;
          font-family: 'Pang';
          font-weight: 400;
          color: #FFAE00;
        }

        h3 {
          font-size: 0.12rem;
          color: #FFFFFF;
          background: linear-gradient(0deg, #33A2F7 0%, #ACEEFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &:nth-child(2) {
          h2 {
            color: #24E1AE;
          }
        }
      }
    }

    .house_echarts {
      padding-top: 0.4rem;
      width: 75%;
      height: 85%;

      .house_main {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>